﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script>

    </script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/echarts.min.js">
    </script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif"> 页面加载中...</div>
</div>
<div class="canvas">
    <canvas width="100%" height="100%"></canvas>
</div>

<div class="head">
    <h1><a href="https://gitee.com/iGaoWei/big-data-view">新闻可视化平台</a></h1>
</div>
<div class="mainbox">
    <div class="topnav">
        <ul class="clearfix">
            <li>
                <div class="boxall">
                    <div class="tit01">新闻类型</div>
                    <div class="boxnav nav01" style="display: flex; align-items: center;">
                        <div class="yqlist">
                            <ul class="clearfix">
                                <li>
                                    <div class="yq">266<span>人民日报</span></div>
                                </li>
                                <li>
                                    <div class="yq">2634<span>南方周末</span></div>
                                </li>
                                <li>
                                    <div class="yq">567<span>中青在线</span></div>
                                </li>
                                <li>
                                    <div class="yq">56345<span>新京报</span></div>
                                </li>
                                <li>
                                    <div class="yq">721<span>香港文汇网</span></div>
                                </li>

                                <li>
                                    <div class="yq">194<span>一点资讯</span></div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="padding: 0;">

                    <div class="boxnav" style="height: 100%; display: flex; align-items: center;">
                        <ul class="zjyl">
                            <li><i>129018<em>元</em></i><span>今日新闻总量</span></li>
                            <li><i>14197421<em>元</em></i><span>最高新闻网</span></li>
                            <li><i>1423412<em>笔</em></i><span>新闻网播报量</span></li>
                            <li><i>124148232<em>笔</em></i><span>历史新闻播报量</span></li>
                        </ul>


                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="padding: 0;">
                    <div class="tit01">播报新闻占列</div>
                    <div class="boxnav nav03" id="echart1">

                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>


    <div class="" style="height:calc(50% - .25rem)">
        <ul class="ulheight">
            <li>
                <div class="boxall">
                    <div class="tit01">国际新闻</div>
                    <div class="boxnav nav03">
                        <div class="listnav  scrollDiv">
                            <ul id="tab1">
                                <li><span style="width: 1000px">美研究：三成新冠感染者将发展成长期后遗症</span></li>
                                <li><span style="width: 1000px">“造王者”梅朗雄</span></li>
                                <li><span style="width: 1000px">德国政府：暂未考虑对乌克兰实行债务减免</span></li>
                                <li><span style="width: 1000px">美澳等国宣称“担忧”中所安全框架协议，中方回击</span></li>
                                <li><span style="width: 1000px">美称不希望中国对俄罗斯提供军事支持，外交部回应</span></li>
                                <li><span style="width: 1000px">普京：强攻亚速钢铁厂不合适 取消强攻命令</span></li>
                                <li><span style="width: 1000px">美韩军演前 韩国一名总统府警卫偷走手枪自杀</span></li>
                                <li><span style="width: 1000px">土耳其外长表态：不应期待土耳其对俄罗斯实施制裁</span></li>
                                <li><span style="width: 1000px">俄罗斯、白俄罗斯化肥出口受限，谁的粮食歉收？</span></li>
                                <li><span style="width: 1000px">娜比乌琳娜连任俄罗斯央行行长</span></li>

                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall">
                    <div class="tit01">热点新闻</div>
                    <div class="boxnav nav03">
                        <div class="listnav  scrollDiv">
                            <ul id ="tab2">
                                <li><span style="width: 1000px">习近平就气候变化问题复信英国小学生</span></li>
                                <li><span style="width: 1000px">山西太原公布病例31例本土感染者有关情况</span></li>
                                <li><span style="width: 1000px">囤货之余，该重新认识罐头了</span></li>
                                <li><span style="width: 1000px">什么是摆脱疫情的重要指标？张文宏发声</span></li>
                                <li><span style="width: 1000px">上海、吉林，对中国汽车产业链意味着什么</span></li>
                                <li><span style="width: 1000px">江西南昌：实施较大范围区域静态管理</span></li>
                                <li><span style="width: 1000px">上海严厉打击物资采购犯罪，还有这些恶行尚待彻查</span></li>
                                <li><span style="width: 1000px">回温进行时！江苏最高气温冲击30℃+</span></li>
                                <li><span style="width: 1000px">惨烈顿巴斯巷战，21世纪以来最大规模地面战？！</span></li>
                                <li><span style="width: 1000px">边程北电表演专业考试全国第一 蕾哈娜男友机场被捕</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall">
                    <div class="tit01">今日新闻</div>
                    <div class="boxnav nav03">
                        <div class="listnav  scrollDiv">
                            <ul id="tab">
                                <li><span style="width: 1000px">上海疫情之下物资配送“最后100米”</span></li>
                                <li><span style="width: 1000px">印尼雅万高铁动车走行线开始铺轨</span></li>
                                <li><span style="width: 1000px">网球大满贯得主莎拉波娃怀孕 35岁生日晒孕照公布喜讯</span></li>
                                <li><span style="width: 1000px">情况有变，乌军重要人物阵亡！俄媒公开击杀画面，现场火光四溅</span></li>
                                <li><span style="width: 1000px">“谈好15元嫖资结果被偷千元”6旬大爷“艳遇”大妈被窃，找民警来评理</span></li>
                                <li><span style="width: 1000px">新疆乌伦古湖冰面“开湖”</span></li>
                                <li><span style="width: 1000px">新疆警察学院原党委书记李彦明被双开</span></li>
                                <li><span style="width: 1000px">美国科学家最新发现女人更适合太空旅行</span></li>
                                <li><span style="width: 1000px">世锦赛丁俊晖3杆破百却犯致命失误 8-10止步首轮</span></li>
                                <li><span style="width: 1000px">女子16年前存3万，现被告知余额为0！中国银行回应：正在调查</span></li>


                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>


</div>


<script language="JavaScript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.liMarquee.js"></script>
<script type="text/javascript">
    $('.counter').countUp();

    $(function () {
        window.onload = getDayJournalism();
        window.onload = gethotNews();
        window.onload = getworldNews();
        //获取今日新闻
        function getDayJournalism() {
            $.get('wanglk_bds/dayJournalism').done(function (data) {
                showDayJournalism(data);
            });
        }

        function showDayJournalism(data) {
            var str = "";//定义用于拼接的字符串
            for (var i = 0; i < data.length; i++) {
                //拼接表格的行和列
                str = "<li>"+"<span style='width: 1000px'>" + data[i].name +"</span>"+ "</li>";
                //追加到table中
                $("#tab").append(str);
            }
        }
        //获取国际新闻
        function getworldNews() {
            $.get('wanglk_bds/worldNews').done(function (data) {
                showworldNews(data);
            });
        }

        function showworldNews(data) {
            var str = "";//定义用于拼接的字符串
            for (var i = 0; i < data.length; i++) {
                console.log(i)
                console.log(data.length)
                console.log(data[i])
                //拼接表格的行和列
                str = "<li><span style='width: 1000px'>" + data[i].title +"</span></li>";
                //追加到table中
                $("#tab1").append(str);
            }
        }
        //获取热点新闻
        function gethotNews() {
            $.get('wanglk_bds/hotNews').done(function (data) {
                showhotNews(data);
            });
        }

        function showhotNews(data) {
            var str = "";//定义用于拼接的字符串
            for (var i = 0; i < data.length; i++) {
                //拼接表格的行和列
                str = "<li>"+"<span style='width: 1000px'>" + data[i].name +"</span>"+ "</li>";
                //追加到table中
                $("#tab2").append(str);
            }
        }
        $('.scrollDiv').liMarquee({
            direction: 'up',//身上滚动
            runshort: true,//内容不足时不滚动
            scrollamount: 20,//速度
        });
    });

</script>


<script>
    $(function () {

        var canvas = document.querySelector('canvas'),

            ctx = canvas.getContext('2d')

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

        ctx.lineWidth = .3

        ctx.strokeStyle = (new Color(150)).style;


        var mousePosition = {

            x: 30 * canvas.width / 100,

            y: 30 * canvas.height / 100

        };


        var dots = {

            nb: 250,

            distance: 50,

            d_radius: 400,

            array: []

        };


        function colorValue(min) {

            return Math.floor(Math.random() * 255 + min);

        }


        function createColorStyle(r, g, b) {

            return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';

        }


        function mixComponents(comp1, weight1, comp2, weight2) {

            return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);

        }


        function averageColorStyles(dot1, dot2) {

            var color1 = dot1.color,

                color2 = dot2.color;


            var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),

                g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),

                b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);

            return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));

        }


        function Color(min) {

            min = min || 0;

            this.r = colorValue(min);

            this.g = colorValue(min);

            this.b = colorValue(min);

            this.style = createColorStyle(this.r, this.g, this.b);

        }


        function Dot() {

            this.x = Math.random() * canvas.width;

            this.y = Math.random() * canvas.height;


            this.vx = -.5 + Math.random();

            this.vy = -.5 + Math.random();


            this.radius = Math.random() * 2;


            this.color = new Color();

            console.log(this);

        }


        Dot.prototype = {

            draw: function () {

                ctx.beginPath();

                ctx.fillStyle = this.color.style;

                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

                ctx.fill();

            }

        };


        function createDots() {

            for (i = 0; i < dots.nb; i++) {

                dots.array.push(new Dot());

            }

        }


        function moveDots() {

            for (i = 0; i < dots.nb; i++) {


                var dot = dots.array[i];


                if (dot.y < 0 || dot.y > canvas.height) {

                    dot.vx = dot.vx;

                    dot.vy = -dot.vy;

                } else if (dot.x < 0 || dot.x > canvas.width) {

                    dot.vx = -dot.vx;

                    dot.vy = dot.vy;

                }

                dot.x += dot.vx;

                dot.y += dot.vy;

            }

        }


        function connectDots() {

            for (i = 0; i < dots.nb; i++) {

                for (j = 0; j < dots.nb; j++) {

                    i_dot = dots.array[i];

                    j_dot = dots.array[j];


                    if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {

                        if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {

                            ctx.beginPath();

                            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);

                            ctx.moveTo(i_dot.x, i_dot.y);

                            ctx.lineTo(j_dot.x, j_dot.y);

                            ctx.stroke();

                            ctx.closePath();

                        }

                    }

                }

            }

        }


        function drawDots() {

            for (i = 0; i < dots.nb; i++) {

                var dot = dots.array[i];

                dot.draw();

            }

        }


        function animateDots() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            moveDots();

            connectDots();

            drawDots();


            requestAnimationFrame(animateDots);

        }


        $('canvas').on('mousemove', function (e) {

            mousePosition.x = e.pageX;

            mousePosition.y = e.pageY;

        });


        $('canvas').on('mouseleave', function (e) {

            mousePosition.x = canvas.width / 2;

            mousePosition.y = canvas.height / 2;

        });


        createDots();

        requestAnimationFrame(animateDots);

    });

</script>
</body>
</html>
